<template>
    <!-- 主题类型：专题 -->
    <div class="list-special-component-item">
        <router-link class="list-special-component-title"
                     :to="{name: 'Special', params: {channelid: info.content.channelId, specialid: info.content.id}}">
            {{info.content.specialName}}
        </router-link>
        <div style="width:100%;height:15px;" v-if="!info.content.specialCover"></div>
        <router-link class="list-special-component-img" v-if="info.content.specialCover"
                     :to="{name: 'Special', params: {channelid: info.content.channelId, specialid: info.content.id}}">
            <img v-lazy="addCmdUrl(info.content.specialCover,600,100)"/>
        </router-link>
        <div class="clearBoth"></div>
        <router-link class="list-special-component-info"
                     :to="{name: 'Index', params: {channelid: info.content.channelId}}">
            <div class="floatL">
                <img src="../assets/images/special.png" class="list-special-component-info-img"/>
                {{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.displayTime?info.content.displayTime:info.content.createDate)}}
            </div>
            <div class="floatR" v-if="info.content.totalViewCount">{{this.simpleNum(info.content.totalViewCount)}}看过</div>
            <div class="clearBoth"></div>
        </router-link>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        watch: {
            '$route' (to, from) {
                //刷新参数放到这里里面去触发就可以刷新相同界面了
                if (to.name == from.name) {
                    window.location.href = to.path;
                }
            }
        }

    }
</script>

<style>
    .list-special-component-item {
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
    }

    .list-special-component-title {
        display: block;
        font-size: 1.0rem;
        line-height: 1.3rem;
        color: #444444;
        overflow: hidden;
        /*font-weight: bold;*/
        text-decoration: none;
    }

    .list-special-component-img {
        width: 100%;
        display: block;
        margin: 0.3rem auto;
        padding-bottom: 40%;
        /*float: left;*/
        position: relative;
    }

    .list-special-component-img img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
    }

    .list-special-component-info {
        font-size: 0.5rem;
        color: #999999;
        line-height: 1.0rem;
        display: block;
    }

    .list-special-component-info-img {
        height: 0.9rem;
        vertical-align: text-bottom;
    }
</style>